<template>
    <div class="list">
        <catalog-item :tree="tree" :title="title" class-data="H1" class="tree"></catalog-item>
        <!-- <slot>
            <div v-for="(item,index) in tree" :key="index" name="item" :class="item.class">{{ item.text }}</div>
        </slot> -->
    </div>
</template>

<script>
    import { CatalogTree } from './catalogTree.js'
    import catalogItem from './catalog-item.vue'
    export default {
        name: 'catalog',
        data() {
            return {
                tree: []
            };
        },
        components: {
            catalogItem
        },
        props: {
            html: {
                type: String,
                default: ''
            },
            title: {
                type: String,
                default: ''
            },
        },
        mounted() {
            this.init()
        },
        methods: {
            init() {
                 console.log(CatalogTree)
                let catalogTree = new CatalogTree({
                    html: this.html,
                    title: this.title
                })
                // catalogTree.init()
                console.log(catalogTree.tree)
                this.tree = catalogTree.tree
            }
        }
    };
</script>

<style scoped lang="scss">
    .list {
        width: 100%;
        .tree {
            // border-left: 1px solid #eee;
        }
    }
</style>
